import React, { useState, useEffect } from 'react';
import { Card, Avatar } from 'antd';
import { AntDesignOutlined, SoundTwoTone } from '@ant-design/icons';
import css from './index.module.less';
import { countCategories } from '@/api/category';
import { countBlogs } from '@/api/blog';

export default function Index() {
	const item = sessionStorage.getItem('info')
	const info = JSON.parse(item);
	const [blogTotal, setBlogTotal] = useState(0);
	const [categoryTotal, setCategoryTotal] = useState(0);
	useEffect(() => {
		if (info != null) {
			const id = info.id
			countCategories(id).then((res) => {
				if (res.code === 200) {
					setCategoryTotal(res.data);
				}
			});
			countBlogs(id).then((res) => {
				if (res.code === 200) {
					setBlogTotal(res.data);
				}
			})
		}
	}, [])
  return (
    <div>
			{item == null ? <></> :
				<div className={css.content}>
					<Card hoverable className={css.card}>
						<Avatar
							size={{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }}
							icon={<AntDesignOutlined />}
							src={info.avatar}
						/>
						<h1>{info.username}</h1>
						<div className={css.count}>
							<div className={css.articles}>
								<div>Articles</div>
								<div className={css.total}>{blogTotal}</div>
							</div>
							<div className={css.articles}>
								<div>Categories</div>
								<div className={css.total}>{categoryTotal}</div>
							</div>
						</div>
					</Card>

					<Card hoverable className={css.announcement}>
						<h4><SoundTwoTone /> Announcement</h4>
						<p>This is my Blog!</p>
					</Card>
				</div>}
		</div>
  );
}
